<template>
    <div class="good-item-div">
        <div style="width: 100%;height: 10px;clear: both;"></div>
        <div class="good-item">
            <img @click="showDetail" :src="good.logoImg">
            <div class="good-item-right">
                <div class="good-name"><span v-if="good.isHot === 1"
                        style="background-color: red; font-size:10px;padding: 2px 4px;color: white;border-radius: 3px;"><van-icon
                            color="white" name="fire" /></span>
                    {{ good.goodName }}
                </div>
                <div class="good-tag">
                    <van-tag round style="margin-right: 5px;margin-top: 2px;" type="warning" plain v-for="item in goodTag"
                        v-bind:key="'good' + item.id">{{ item }}</van-tag>
                </div>
                <!-- <div class="good-supplier">{{ good.parentName }}</div> -->
                <div class="commission-rule">
                    {{ good.selfActiveCommission ? '我的激活佣金' + good.selfActiveCommission + '元' : '' }}{{
                        good.xiaJiActiveCommission > 0 ?
                        ',下级代理' + good.xiaJiActiveCommission + '元' : ',下级代理0元' }}
                </div>
            </div>
            <div style="width: 100%;height: 5px;clear: both;border-bottom: 1px solid #eee;"></div>
        </div>
        <div style="width: 100%;height: 8px;clear: both;"></div>
        <div class="good-item-button">
            <van-button round v-if="good.status === 100" plain hairline type="success" size="mini"
                style="margin-right: 5px;float: right;padding:0px 10px;" color="#15C261"
                @click="showCommitOrderUrl">下单链接</van-button>
            <van-button round plain hairline type="danger" size="mini"
                style="margin-right: 5px;float: right;padding:0px 10px;border:1px solid #CCCCCC;font-size: 13px;"
                color="black" @click="showZl(good.goodName)">查看资料<span
                    style="font-size: 10px;margin-left: 3px;">▶</span></van-button>
        </div>
        <div style="width: 100%;height: 10px;clear: both;"></div>

        <!--详情-->
        <div v-show="detailDlglog" class="asheng-custom-dlglog">
            <div class="asheng-custom-dlglog-inner" style="height: 485px;">
                <div class="asheng-custom-dlglog-title">资料详情</div>
                <van-icon name="cross" @click="detailDlglog = false"
                    style="position: absolute;right: 0px;top:0px; margin-top: 10px;font-size: 20px;margin-right: 10px;" />
                <div class="asheng-custom-dlglog-content"
                    style="height: 430px;overflow-y: auto;text-align: left;line-height: 30px;">
                    <div>套餐名称：<strong>{{ detail.goodName }}</strong></div>
                    <div>在售状态：在售</div>
                    <div v-if="detail.belongAddress">套餐归属：{{ detail.belongAddress ? detail.belongAddress : '无' }}</div>
                    <div v-if="detail.psType">配送方式：{{ detail.psType ? detail.psType : '无' }}</div>
                    <div v-if="detail.activedType">开卡方式：{{ detail.activedType }}</div>
                    <div v-if="detail.firstAddChannel">首冲渠道：{{ detail.firstAddChannel }}</div>
                    <div v-if="detail.ageLimit">年龄限制：{{ detail.ageLimit }}</div>
                    <div v-if="detail.packageDuration">套餐合约：{{ detail.packageDuration }}</div>
                    <div v-if="detail.againActivedType">违停复机：{{ detail.againActivedType }}</div>
                    <div v-if="detail.publicizeChannel">宣传渠道：{{ detail.publicizeChannel }}</div>
                    <div v-if="detail.packageComposition">套餐构成：{{ detail.packageComposition }}</div>
                    <div v-if="detail.prohibitArea">禁发区域：{{ detail.prohibitArea }}</div>
                    <div v-if="detail.remark">其它备注：{{ detail.remark }}</div>
                    <div v-if="detail.resultRule">结算规则：{{ detail.resultRule }}</div>
                    <div v-if="detail.activityImgUrlList && detail.activityImgUrlList.length > 0">激活图片：</div>
                    <div v-if="detail.activityImgUrlList && detail.activityImgUrlList.length > 0">
                        <div v-for="img in detail.activityImgUrlList" :key="img.url">
                            <img :src="img.url" style="width: 100%;" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--详情-->
    </div>
</template>

<script>
import { getGoodInfoByGoodName } from '@/api/seller/goodinfo'
import { showToast } from 'vant';
export default {
    name: "GoodItem",
    props: {
        good: Object
    },
    created() {
        if (this.good.tagName) {
            this.goodTag = JSON.parse(this.good.tagName)
        }

        this.form.id = this.good.id;
        this.form.activeCommission = this.good.activeCommission;
    },
    data() {
        return {
            goodTag: [],
            commissionRule: "",
            commissionRuleDlalog: false,
            form: {},
            detailDlglog: false,
            detail: {}
        }
    },
    methods: {
        showCommitOrderUrl() {
            this.$emit("showCommitOrderUrl", this.good.id)
        },
        showDetail() {
            this.$router.push({
                path: "/seller/good/detail", query: { id: this.good.id }
            })
        },
        //改变佣金规则
        changeCommissionRule() {
            this.commissionRuleDlalog = true
        },

        restGoodPageData() {
            this.$emit("restGoodPageData")
        },

        showZl(goodName) {
            getGoodInfoByGoodName(goodName).then(res => {
                if (res.code == 200) {
                    this.detail = res.data
                    this.detailDlglog = true
                } else {
                    showToast(res.msg)
                }
            })
        }
    }
}
</script>
<style scoped>
.good-item-div {
    width: 94%;
    margin-left: 3%;
    background-color: white;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.good-item {
    width: 96%;
    margin-left: 2%;
}

.good-item img {
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 10px;
    border-radius: 5px;
}

.good-item .good-name {
    color: rgb(25, 124, 255);
    font-size: 15px;
    line-height: 25px;
}

.good-supplier {
    margin-top: 3px;
    font-size: 14px;
}

.commission-rule {
    margin-top: 8px;
    font-size: 10px;
    color: #FF1111;
}

.good-item-button {
    width: 96%;
    margin-left: 2%;
}
</style>